<template>
  <div class="app-container">
    <!-- 顶部数据卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-title">今日总收入</div>
          <div class="card-number">¥ {{todayTotal}}</div>
          <div class="card-footer">
            <span>较昨日</span>
            <span class="up">+12.5%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-title">场库营收</div>
          <div class="card-number">¥ {{parkingIncome}}</div>
          <div class="card-footer">
            <span>占比</span>
            <span>{{parkingIncomeRate}}%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-title">路边营收</div>
          <div class="card-number">¥ {{roadIncome}}</div>
          <div class="card-footer">
            <span>占比</span>
            <span>{{roadIncomeRate}}%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <div class="card-title">总泊位数</div>
          <div class="card-number">{{totalSpots}}</div>
          <div class="card-footer">
            <span>空闲</span>
            <span class="free">{{freeSpots}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 停车位使用情况 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>泊位占有率</span>
          </div>
          <div ref="occupancyChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>支付方式占比</span>
          </div>
          <div ref="paymentChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>支付来源分析</span>
          </div>
          <div ref="sourceChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 收入趋势和排行 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header">
            <span>收入趋势</span>
          </div>
          <div ref="trendChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>停车场收益排行</span>
          </div>
          <div class="rank-list">
            <div v-for="(item, index) in parkingRank" :key="index" class="rank-item">
              <span class="rank-num" :class="{'top3': index < 3}">{{index + 1}}</span>
              <span class="rank-name">{{item.name}}</span>
              <span class="rank-value">¥{{item.income}}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "OperationOverview",
  data() {
    return {
      loading: false,
      // 收入数据
      todayTotal: 25000,
      parkingIncome: 15000,
      roadIncome: 10000,
      parkingIncomeRate: 60,
      roadIncomeRate: 40,
      // 泊位数据
      totalSpots: 2000,
      freeSpots: 800,
      // 图表实例
      occupancyChart: null,
      paymentChart: null,
      sourceChart: null,
      trendChart: null,
      // 停车场排行
      parkingRank: [
        { name: '中央广场停车场', income: 5200 },
        { name: '火车站停车场', income: 4800 },
        { name: '商业中心停车场', income: 4500 },
        { name: '医院停车场', income: 3800 },
        { name: '体育馆停车场', income: 3500 }
      ]
    }
  },
  mounted() {
    this.initCharts()
    window.addEventListener('resize', this.resizeCharts)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts)
  },
  methods: {
    initCharts() {
      this.occupancyChart = echarts.init(this.$refs.occupancyChart)
      this.paymentChart = echarts.init(this.$refs.paymentChart)
      this.sourceChart = echarts.init(this.$refs.sourceChart)
      this.trendChart = echarts.init(this.$refs.trendChart)
      this.updateCharts()
    },
    resizeCharts() {
      this.occupancyChart?.resize()
      this.paymentChart?.resize()
      this.sourceChart?.resize()
      this.trendChart?.resize()
    },
    updateCharts() {
      // 泊位占有率图表
      const occupancyOption = {
        series: [{
          type: 'gauge',
          progress: {
            show: true,
            width: 18
          },
          axisLine: {
            lineStyle: {
              width: 18
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          pointer: {
            show: false
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            fontSize: 30,
            offsetCenter: [0, '70%'],
            formatter: '{value}%',
            color: 'inherit'
          },
          data: [{
            value: 60
          }]
        }]
      }
      this.occupancyChart.setOption(occupancyOption)

      // 支付方式占比
      const paymentOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 45, name: '微信支付' },
            { value: 35, name: '支付宝' },
            { value: 20, name: '现金支付' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      this.paymentChart.setOption(paymentOption)

      // 支付来源分析
      const sourceOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 50, name: 'APP支付' },
            { value: 30, name: '现场支付' },
            { value: 20, name: '自助终端' }
          ]
        }]
      }
      this.sourceChart.setOption(sourceOption)

      // 收入趋势
      const trendOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['场库收入', '路边收入']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '场库收入',
          type: 'line',
          smooth: true,
          data: [12000, 13200, 14100, 13500, 15000, 16800, 15500]
        },
        {
          name: '路边收入',
          type: 'line',
          smooth: true,
          data: [8000, 8800, 9200, 8900, 9500, 10200, 9800]
        }]
      }
      this.trendChart.setOption(trendOption)
    }
  }
}
</script>

<style scoped>
.data-card {
  height: 120px;
  text-align: center;
}
.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.card-number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}
.card-footer {
  font-size: 12px;
  color: #999;
}
.card-footer .up {
  color: #67C23A;
}
.card-footer .free {
  color: #409EFF;
}
.rank-list {
  padding: 0 20px;
}
.rank-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}
.rank-num {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #f0f2f5;
  border-radius: 50%;
  margin-right: 10px;
}
.rank-num.top3 {
  background: #409EFF;
  color: #fff;
}
.rank-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-value {
  color: #409EFF;
  font-weight: bold;
}
</style> 